<script setup>
import tab_home from "../assets/img/tabbar/tab_home.png";
import tab_home_active from "../assets/img/tabbar/tab_home_active.png";
import tab_favor from "../assets/img/tabbar/tab_favor.png";
import tab_favor_active from "../assets/img/tabbar/tab_favor_active.png";
import tab_order from "../assets/img/tabbar/tab_order.png";
import tab_order_active from "../assets/img/tabbar/tab_order_active.png";
import tab_message from "../assets/img/tabbar/tab_message.png";

import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const tabbarDatas = [
  {
    text: "首页",
    imgUrl: tab_home,
    imgUrlActive: tab_home_active,
    path: "/home",
  },
  {
    text: "收藏",
    imgUrl: tab_favor,
    imgUrlActive: tab_favor_active,
    path: "/favor",
  },
  {
    text: "订单",
    imgUrl: tab_order,
    imgUrlActive: tab_order_active,
    path: "/order",
  },
  {
    text: "消息",
    imgUrl: tab_message,
    imgUrlActive: tab_message,
    path: "/message",
  },
];
let currentIndex = ref(0);
const router = useRouter();
const goto = (path, index) => {
  router.push(path);
  currentIndex.value = index;
};
const route = useRoute();
watch(route, (newRoute) => {
  const index = tabbarDatas.findIndex((item) => item.path === newRoute.path);
  currentIndex.value = index;
});
</script>

<template>
  <div class="tabbar">
    <template v-for="(item,index) in tabbarDatas" :key="index">
      <div class="tb_item" :class="currentIndex == index ? 'active':''" @click="goto(item.path,index)">
        <img :src="currentIndex == index ? item.imgUrlActive:item.imgUrl" alt="">
        <span>{{ item.text}}</span>
      </div>
    </template>
  </div>
</template>
<style lang="less">
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  .tb_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &.active {
      color: var(--primary-color);
    }
    img {
      width: 34px;
    }
  }
}
</style>